<template>
  <div>
    <!--1-->
    <div class="d" v-for="item in data" :key="item.id">
      <router-link v-if="item.data_url" :to="'/adIndex/' + item.data_url">
        <span
          :class="[arr.indexOf(item.title)!=-1 ?'red':'']"
          @click="addTopList({title:item.title,url:'/adIndex/' + item.data_url,pid:item.pid})"
          v-if="item.data_url"
          :style="{paddingLeft:pl+'px'}"
        >{{item.title}}</span>
      </router-link>
      <span
        @click="clickSH($event,item)"
        :class="[arr.indexOf(item.title)!=-1 ?'red':'']"
        v-if="!item.data_url || item.data_url == ''"
        :style="{paddingLeft:pl+'px'}"
      >
        <i :class="['iconfont',item.coin]"></i>
        {{item.title}}
        <i class="iconfont xiala">&#xe62f;</i>
      </span>
      <List v-if="item._child[0]._child" :data="item._child" :pl="parseInt(pl)+10"></List>
    </div>
    <!--1-->
  </div>
</template>
<script>
import config from "../../public/config";
export default {
  name: "List",
  data() {
    return {
      arr: "",
      patent: null
    };
  },
  props: ["data", "pl"],
  mounted() {},
  created() {
    this.arr = config.get("sys").unsetMnu;
  },
  methods: {
    //添加导航
    addTopList(val) {
      var topList = config.get("topHis");
      var beyond = config.get("beyond");
      var menu = config.get("menu");
      (function findID(data) {
        for (const i in data) {
          if (data[i].id == val.pid) {
            val.icon = data[i].coin;
          } else {
            data[i]._child ? findID(data[i]._child) : "";
          }
        }
      })(menu);
      var hasHis = topList.findIndex(item => {
        return item.url === val.url;
      });
      window.sessionStorage.setItem("abxnowhis", JSON.stringify(val));
      var hasBey = beyond.findIndex(item => {
        return item.url === val.url;
      });
      if (hasBey == -1 && topList.length >= 7 && hasHis == -1) {
        config.setbeyond(val);
      }
      if (hasHis == -1 && topList.length < 7) {
        config.setTopHis(val);
      }
    },
    //点击列表
    clickSH(event) {
      if (
        event.target.parentElement.children.length == 2 &&
        event.target.parentElement.children[1].children[0].children.length ===
          2 &&
        event.target.parentElement.className == "d"
      ) {
        event.target.parentElement.children[1].children.forEach(element => {
          element.className = "d";
        });
        event.target.parentElement.children[1].children[0].className = "d auto";
      }
      if (event.target.parentElement.className == "d auto") {
        event.target.parentElement.className = "d";
      } else {
        event.target.parentElement.parentElement.children.forEach(element => {
          element.className = "d";
          event.target.parentElement.className = "d auto";
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.router-link-exact-active > span {
  color: orange !important;
}
.red,
.red + div span {
  color: red !important;
  font-weight: bold !important;
}

a {
  display: inline-block;
  height: 100%;
  color: #fff;
  width: 100%;
}
.d {
  width: 100%;
  max-height: 50px;
  overflow: hidden;
  transition: 0.5s;
  color: #b8c7ce;
  position: relative;
  span {
    height: 50px;
    width: 100%;
    background: #1a2226;
    line-height: 50px;
    opacity: 0.8;
    transition: 0.5s;
    cursor: pointer;
    overflow: hidden;
    i {
      pointer-events: none;
    }
    &:hover {
      background: #434a50;
      opacity: 1;
    }
    > .xiala {
      float: right;
      font-size: 10px;
      transform: rotate(-90deg);
      opacity: 0.5;
      position: relative;
      transition: 0.3s;
      user-select: none;
      color: #d8c7ce;
    }
  }
}
.auto {
  max-height: 1000px !important;
  background: #2c3b41;

  span {
    color: #fff;
    background: #2c3b41;
  }
  > span > .xiala {
    transform: rotate(0deg);
  }
  a {
    color: #b8c7ce;
  }
}
</style>
